<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
			<view class="titleBar" 
			:style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
				<view class="icon">
					<uni-icons type="back" color="#fff"></uni-icons>
				</view>
		
			</view>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft} from "@/utils/system.js"


</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		z-index: 10;
		background:
		linear-gradient(to bottom,transparent,#fff 600rpx),
		linear-gradient(to right,#fe0c28 10%,#F4E258);
		.statusBar{}
		.icon{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-left: 20rpx;
		
		}
		.titleBar{
			display: flex;	
			align-items: center;
			height: 30rpx;
			.score{
				align-items: center;
				display: flex;
				flex-direction: row;
				background-color: rgba(0, 0, 0, 0.5);
				font-size: 22px;
				font-weight: 700;
				color: black;
				margin-left: 30rpx;
				padding: 5rpx 10rpx;
				border-radius: 45rpx;
				.coin {
					height: 50rpx;
					width: 50rpx;
				}
				.add{
					height: 30rpx;
					width: 30rpx;
				}
				.text{
					color: white;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.fill{
		
	}
}
</style>